<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>添加微信公众号</title>
  <script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/jquery"></script>
  <script src="__PUBLIC__/script/layer/layer.js"></script>
  <script src="__PUBLIC__/node_modules/datatables/media/js/jquery.dataTables.min.js"></script>
  <script src="__PUBLIC__/script/bootstrap-treeview-master/dist/bootstrap-treeview.min.js"></script>
  <link rel="stylesheet" href="__PUBLIC__/script/bootstrap-treeview-master/dist/bootstrap-treeview.min.css">
  <link rel="stylesheet" href="__PUBLIC__/node_modules/bootstrap/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="__PUBLIC__/style/manage.css">
  <link rel="stylesheet" href="__PUBLIC__/style/add_local.css">
</head>
<body>
  <!-- 获取密码 -->
  <input type="hidden" value="{:U('Home/index/sms')}" id="ajax_get_pass">
  <!-- 验证密码 -->
  <input type="hidden" value="{:U('Index/chack_phone')}" id="ajax_auth_pass">
  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-12 col-md-12">
        <div class="row">
          <!-- 右主体  -->
          <div class="col-md-10 col-md-10 messageBox">
            <div class="form_box">
              <!-- 后端修改： 提交表单的地址 -->
              <form autocomplete="off" action="{:U('add_weixin')}" method="post" id="add_post">
                <div class="shouquan_weixin_appid">
                  <input type="text" name="appid" id="shouquan_weixin_appid" placeholder="输入公众号appid" required autofocus autocomplete='off'>
                </div>
                <div class="shouquan_weixin_appsecret">
                  <input type="text" name="appsecret" id="shouquan_weixin_appsecret" placeholder="输入公众号appsecret" required autocomplete='off'>
                </div>
                <div class="shouquan_weixin_original_id">
                  <input type="text" name="original_id" id="shouquan_weixin_original_id" placeholder="输入公众号原始ID" required autocomplete='off'>
                </div>
                <div class="shouquan_weixin_token">
                  <input type="text" name="token" id="shouquan_weixin_token" placeholder="输入公众号Token" required autocomplete='off'>
                </div>
                <div class="shouquan_weixin_EncodingAESKey">
                  <input type="text" name="EncodingAESKey" id="shouquan_weixin_EncodingAESKey" placeholder="可选：公众号EncodingAESKey" autocomplete='off'>
                </div>
                <div class="shouquan_weixin_name">
                  <input type="text" name="nick_name" id="shouquan_weixin_name" placeholder="输入公众号名称" required autocomplete='off'>
                </div>
                <div class="shouquan_name">
                  <input type="text" name="u_name" id="shouquan_name" placeholder="授权人" required autocomplete='off'>
                </div>
                <div class="shouquan_phone">
                  <input type="tel" name="u_phone" id="shouquan_phone" placeholder="授权手机号（登陆用）"
                  required autocomplete='off'
                  title='请输入正确的手机号' pattern="\d{11,13}">

                </div>
                <div class="shouquan_mail">
                  <input type="email" name="u_email" id="shouquan_mail" placeholder="邮箱" required autocomplete='off'>
                </div>
                <input type="button" id='send_auth_pass' value="发送密码" id="send_auth_pass">
                <div class="shouquan_pass">
                  <input type="password" autocomplete="off" name="u_pass" id="shouquan_pass" placeholder="填写密码" required autocomplete='off'>
                </div>
                <input type="submit" value="确定授权" id="add_post_button">
              </form>
            </div>
          </div>
          <!-- end 右主体 -->
        </div>
      </div>
    </div>
  </div>

  <script id='coountDown'>
$(document).ready(() => {
      $('#add_post_button').on('click', (event)=>{
        event.preventDefault();
        alert('请先获取密码！')
        return false
      })
      $('#send_auth_pass').one('click', send_pass)
    })
    function countDown (sec, ele, fn) {
      if ( typeof sec === 'number' && sec === 0) {
        fn()
      } else if (typeof sec === 'number' && sec > 0) {
        // 需要修改倒数的元素
        $(`#${ele}`).val(`${sec--}秒`)
        return ((sec, ele, fn) => {
          setTimeout(()=>{
            countDown(sec, ele, fn)
          }, 1000)
        })(sec, ele, fn)
      } else {
        ;
      }
    }
    // gen一个随机数值串出来
    function genRandCode (leng) {
      if( String(typeof leng).toLocaleLowerCase() === 'number') return Math.random().toFixed(leng).toString().replace(/\d\./, '')
      else {
        $('#getCode').one({'click': sendCode}, {id: 'getCode', urlID: 'url_getCode', phoneID: 'web_phone'})
        throw new Error(`收到类型不为数值的参数：${leng} | ${String(typeof leng).toLocaleLowerCase()}。无法产生指定长度随机数`)
      }
    }
    const send_code = genRandCode(8)
    function send_pass() {
      alert('正在为您生成密码。。。')
        let url = $('#ajax_get_pass').val()
        let phone = $('#shouquan_phone').val()
        if (phone === '') {
          $('#send_auth_pass').one('click', send_pass)
          alert('请先填写手机号');
        } else {
          $('#send_auth_pass').css('pointer-events','none')

          $.ajax({
            url: url,
            // async: false,
            data: {mobile: phone, send_code: send_code},
            method: 'post'
          }).done((data, code)=> {

            if(data.send_code === `${send_code}` && Number(data.code) === 2) {
              countDown(60, 'send_auth_pass', function(){
                $('#send_auth_pass').val('密码')
                $('#send_auth_pass').css('pointer-events','unset')
                $('#send_auth_pass').off('click')
                $('#send_auth_pass').one('click', send_pass)
              })
              $('#send_auth_pass').remove()
              $('#shouquan_pass').val(data.send_code)
              $('#add_post_button').off('click')

              $('#add_post_button').on('click', function (event) {
                event.preventDefault();
                $('input:required').each((index, item)=>{
                  if($(item).val() === '') {
                    alert('未填写完毕相关表单')
                    throw new Error('未填写完毕相关表单')
                  }
                })
                var formData = $('#add_post').serializeArray()
                var URLAll = "{:U('add_weixin')}";
                $.ajax({
                  type: 'POST',
                  url: URLAll,
                  data: formData,
                  timeout: 30000,
                  success:function(data){
                    console.log(data);
                    if(data == 'ok' || String(data.code) === '1'){
                      window.parent.location.reload();
                      var index=$(window.parent.document).find('.layui-layer-shade').eq(0).attr('times');
                      parent.layer.close(index); //执行关闭
                    }
                  }
                })
                return false
              })
            } else {
              $('#send_auth_pass').off('click')
              $('#send_auth_pass').one('click', send_pass)
              window.alert(`网络错误，请重试。服务器提示：${data.msg}`)
            }
          }).fail((err) => {
            alert('发生网络错误，请检查网络后重试')
            $('#send_auth_pass').css('pointer-events','unset')
            $('#send_auth_pass').off('click')
            $('#send_auth_pass').one('click', send_pass)
          })

        }

    }
  </script>

  <!-- <script id = 'ajax_post'>
    function ajax_post() {
      var formData = $('#add_post').serializeArray()
    	console.log(formData);
    	var url = "{:U('add_weixin')}";
    	$.ajax({
    	  type: 'POST',
    	  url: url,
        async: false,
    	  data: formData,
    	  success:function(data){
    	    if(data == 'ok'){
    	    	window.parent.location.reload();
    	    	var index=$(window.parent.document).find('.layui-layer-shade').eq(0).attr('times');
    	    		parent.layer.close(index); //执行关闭
    	    }
    	  }
    	})
      return false
    }
  </script> -->
</body>
</html>
